<template>
  <div class="login">
    <div class="login-body">
      <div class="header">
        <img src="../../assets/login/LOGO.png" alt="" />
      </div>
      <div class="buttom">
        <div class="buttom-left">
          <img src="../../assets/login/chahua.png" alt="" />
        </div>
        <div class="buttom-right">
          <div class="form">
            <el-input
              v-model="username"
              class="w-50 m-2"
              placeholder="请输入账号"
            >
              <template #prefix>
                <el-icon class="el-input__icon"
                  ><img src="../../assets/login/zhanghao.png" alt=""
                /></el-icon>
              </template>
            </el-input>

            <el-input
              v-model="password"
              class="w-50 m-2"
              placeholder="请输入密码"
            >
              <template #prefix>
                <el-icon class="el-input__icon"
                  ><img src="../../assets/login/mima.png" alt=""
                /></el-icon>
              </template>
            </el-input>
            <input
              type="text"
              class="verification-code"
              placeholder="请输入验证码"
            />
            <button @click="login">登录</button>
            <el-checkbox-group v-model="checkList">
              <el-checkbox label="记住账号" />
              <el-checkbox label="记住密码" />
            </el-checkbox-group>
            <!-- <input type="text" v-model="username" />
  <input type="text" v-model="password" />
  <button @click="login">登录</button> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { size } from 'lodash';
import { ref } from "vue";
const username = ref("");
const password = ref("");

const checkList = ref(["selected and disabled"]);
export default {
  name: "LoginPage",
  data() {
    return {
      username,
      password,
      checkList,
      // screenWidth: null,
    };
  },
  methods: {
    login() {
      if (this.username == "admin" && this.password == "1") {
        localStorage.setItem("token", "chinesecuisinemap");
        this.$router.push({
          name: "/system",
          // params: {
          //   username: this.username,
          //   password: this.password,
          // },
        });
        // this.$router.go(1);
      } else {
        localStorage.removeItem("token");
      }
    },
  },
};
</script>

<style lang="less">
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-image: url("../../assets/login/BJ.png");
  .login-body {
    width: 1100px;
    height: 466px;
    background-color: #fff;
    border-radius: 32px;
    .header {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 104px;
      background-color: #fafafa;
      border-radius: 32px 32px 0 0;
    }
    .buttom {
      display: flex;
      height: 330px;
      .buttom-left {
        width: 550px;
      }
      .buttom-right {
        width: 550px;
        .form {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: 280px;
          height: 266px;
          margin-top: 32px;
          margin-left: 32px;
          .el-input {
            height: 40px;
            width: 280px;
            border: 1px solid #f0f0f0;
            border-radius: 4px;
          }

          .el-input__wrapper {
            background-color: #fafafa;
            box-shadow: none;
          }
          .el-input__wrapper.is-focus {
            outline: none;
            border: 1px solid #1fbd4e;
          }
          .el-input__wrapper:hover {
            box-shadow: 0 0 0 1px #c0c4cc inset;
          }
          .el-input__inner::-webkit-input-placeholder {
            color: #c0c0c0;
          }
          .verification-code {
            width: 174px;
            height: 40px;
            box-sizing: border-box;
            padding: 15px;
            font-size: 14px;
            background: #fafafa;
            border: 1px solid #f0f0f0;
            border-radius: 4px;
          }
          .verification-code:hover {
            box-shadow: 0 0 0 1px #c0c4cc inset;
          }
          .verification-code:focus {
            outline: none;
            border: 1px solid #1fbd4e;
          }
          .verification-code::-webkit-input-placeholder {
            color: #c0c0c0;
          }
          button {
            width: 280px;
            height: 40px;
            // opacity: 0.5;
            font-size: 14px;
            color: #fff;
            background: #ff5d0a;
            border: none;
            border-radius: 4px;
          }
          button:hover {
            cursor: pointer;
            background: #a43700;
          }
          .el-checkbox-group {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            height: 20px;
          }
          .el-checkbox {
            height: inherit;
            color: #898989;
          }
          .el-checkbox__input.is-checked + .el-checkbox__label {
            color: #898989;
          }
          .el-checkbox__input.is-checked .el-checkbox__inner {
            background-color: #ff5d0a;
            border-color: #ff5d0a;
          }
        }
      }
    }
  }
}
</style>